import BottomTab from "@/components/BottomTab";
import { EventBus } from "@/utils/EventBus";
import { Suspense, useEffect } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom";

export default function App() {
  const nav = useNavigate()
  const { pathname } = useLocation()
  // 这里是所有的需要登录的总的组件 ，这是一个函数组件
  EventBus.on('logintimeout', () => {
    nav('/login')
  })

  // 如果不在 router/index.ts 里面使用自带的 loader 实现路由拦截，也可以自己在app里面实现
  let token = localStorage.getItem('token')
  useEffect(() => {
    if (!token) {
      nav('/login')
    } else {
      if (pathname == '/') {
        nav('/home')
      }
    }
  }, [])

  return token ? <>
    {/* 这里面放的全是 需要登录后才能访问的子路由 */}
    <Suspense fallback={<em>这也是加载中。。</em>}>
      <Outlet />
    </Suspense>
    <BottomTab />
  </> : <></>

}